import { useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader'

// 设置 securityJsCode
window._AMapSecurityConfig = {
  securityJsCode: '99240abf1188823cd88cfe635a521af3'
}

export default function Baidu () {
  useEffect(() => {
    AMapLoader.load({
      key: 'b5a3290bb8e23f2361bcc36be9435bcd', //申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0' //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    })
      .then((AMap: any) => {
        const map = new AMap.Map('container', {
          viewMode: '2D', // 默认使用 2D 模式
          zoom: 11, //初始化地图层级
          center: [116.397428, 39.90923] //初始化地图中心点
        })

        // const infoWindow = new AMap.InfoWindow({
        //   //创建信息窗体
        //   isCustom: true, //使用自定义窗体
        //   content:
        //     '<div style="background-color:white;width:200px;height:200px;">这里是深圳市政府!</div>', //信息窗体的内容可以是任意html片段
        //   offset: new AMap.Pixel(16, -45)
        // })
        // const onMarkerClick = function (e: any) {
        //   infoWindow.open(map, e.target.getPosition()) //打开信息窗体
        //   //e.target就是被点击的Marker
        // }

        // console.log('---map---', map)
        // // marker 就是地图的覆盖物
        // const marker = new AMap.Marker({
        //   position: [114.057939, 22.543527] //位置
        // })
        // map.add(marker)
        // marker.on('click', onMarkerClick) //绑定click事件

        // // 添加相应的控件
        // let toolbar
        // AMap.plugin('AMap.ToolBar', function () {
        //   // 异步加载插件
        //   toolbar = new AMap.ToolBar() // 缩放工具条实例化
        //   map.addControl(toolbar)
        // })

        AMap.plugin('AMap.Driving', function () {
          // 路线规划
          // 起点
          const startLngLat = [116.379028, 39.865042]
          // 终点
          const endLngLat = [114.057939, 22.543527]

          const driving = new AMap.Driving({
            map: map,
            showTraffic: false // 关闭交通状态
          })

          driving.search(
            startLngLat,
            endLngLat,
            {
              // 途经点
              waypoints: [
                [121.455708, 31.249574],
                [119.296411, 26.074286]
              ]
            },
            function (status: any, result: any) {
              // 未出错时，result即是对应的路线规划方案
              console.log(status, result)
            }
          )

          // 创建 AMap.Icon 实例：
          const icon = new AMap.Icon({
            size: new AMap.Size(100, 100), // 图标尺寸
            image: 'https://img.supfree.net/trasign/b/391.jpg' // Icon的图像
          })

          const marker = new AMap.Marker({
            position: new AMap.LngLat(117.120128, 36.652069),
            icon: icon // 添加 Icon 图标 URL
          })

          map.add(marker)
        })
      })
      .catch((e: any) => {
        console.error(e) //加载错误提示
      })
  }, [])

  return <div id='container' style={{ width: 800, height: '100%' }}></div>
}
